<template>
  <div class="bg-gradient-primary">
    <div class="container">
      <!-- Outer Row -->
      <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
          <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
              <!-- Nested Row within Card Body -->
              <div class="row">
                <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                <div class="col-lg-6">
                  <div class="p-5">
                    <div class="text-center">
                      <h1 class="h4 text-gray-900 mb-4">欢迎登录！</h1>
                    </div>
                    <form class="user">
                      <div class="form-group">
                        <input
                          v-model="userName"
                          class="form-control form-control-user"
                          id="user_id"
                          aria-describedby="emailHelp"
                          placeholder="Enter User ID..."
                          name="user_id"
                          required
                          autofocus
                        />
                      </div>
                      <label id="id"></label>
                      <div class="form-group">
                        <input
                          v-model="password"
                          type="password"
                          class="form-control form-control-user"
                          id="password"
                          placeholder="Password"
                          name="password"
                          required
                          autofocus
                        />
                      </div>
                      <label id="pwd"></label>

                      <div class="form-inline col-lg-6">
                        <label for="">选择用户类型：</label>
                        <div class="form-check form-switch">
                          <input
                            v-model="type"
                            class="form-check-input"
                            type="radio"
                            name="type"
                            value="0"
                          />
                          <label
                            class="form-check-label"
                            for="flexSwitchCheckDefault"
                            >管理员</label
                          >
                        </div>
                        <br />
                        <div class="form-check form-switch">
                          <input
                            v-model="type"
                            class="form-check-input"
                            type="radio"
                            name="type"
                            value="1"
                          />
                          <label
                            class="form-check-label"
                            for="flexSwitchCheckChecked"
                            >用户</label
                          >
                        </div>
                      </div>

                      <hr />
                      <div class="form-group">
                        <div class="custom-control custom-checkbox small">
                          <input
                            type="checkbox"
                            class="custom-control-input"
                            id="customCheck"
                          />
                          <label class="custom-control-label" for="customCheck"
                            >Remember Me</label
                          >
                        </div>
                      </div>
                      <button
                        v-on:click="loginIn()"
                        class="btn btn-success btn-user btn-block"
                        id="login"
                        type="button"
                      >
                        登录
                      </button>

                      <button
                        v-on:click="testCookie()"
                        class="btn btn-success btn-user btn-block"
                        type="button"
                      >
                        测试cookie
                      </button>

                      <button
                        v-on:click="logOut()"
                        class="btn btn-success btn-user btn-block"
                        type="button"
                      >
                        退出登录
                      </button>

                      <button
                        v-on:click="getAllUser()"
                        class="btn btn-success btn-user btn-block"
                        type="button"
                      >
                        getAllUser
                      </button>
                    </form>
                    <hr />
                    <div class="text-center">
                      <a class="small" href="forgot-password.html"
                        >忘记密码？</a
                      >
                    </div>
                    <div class="text-center">
                      <a class="small" href="register.jsp">注册账户！</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      password: "",
      type: "",
    };
  },
  created() {},
  methods: {
    // 执行登录操作
    loginIn() {
      if ((this.userName != "") & (this.password != "") & (this.type != "")) {
        this.axios({
          url: "http://127.0.0.1:8081/main-service/check_user",
          method: "post",
          dataType: "json",
          data: {
            name: this.userName,
            password: this.password,
            type: this.type,
          },
        }).then((body) => {
          // console.log(body.data.data.result[1].jwt_token);
          if (body.data.code == 0) {
            this.$cookies.set(
              "user_id",
              body.data.data.result[0].user_id,
              "1d"
            );
            this.$cookies.set(
              "jwt_token",
              body.data.data.result[1].jwt_token,
              "1d"
            );
            this.$router.push({ path: "/adminIndex"});
          }
        });
      } else {
        alert("信息不完整");
      }
    },
    testCookie() {
      var cookie = this.getCookie("user_id");
      console.log(this.getCookie("jwt_token"));
    },
    // 获取cookie信息
    getCookie(name) {
      var arr = document.cookie.match(
        new RegExp("(^| )" + name + "=([^;]*)(;|$)")
      );
      if (arr != null) return unescape(arr[2]);
      return null;
    },
    // 删除cookie信息，退出登录
    logOut() {
      this.$cookies.set("user_id", "");
      this.$cookies.set("jwt_token", null);
    },
    // 判断当前用户是否存在于数据库中
    getAllUser() {
      this.axios({
        url: "http://127.0.0.1:8081/main-service/getAllUser",
        method: "post",
        dataType: "json",
        data: { token: this.getCookie('jwt_token') },
      }).then((body) => {
        var result = body.data;
        if(result.code==0){
          console.log(result.data.result);
        }else{
          console.log(result.msg);
        }
        
      });
    },
  },
};
</script>

<style scoped>
@import "@/../../static/css/sb-admin-2.min.css";
</style>